

<template>
  <el-form :ref="componentFormRef" :model="componentForm" :rules="componentFormRules" size="medium"
           label-width="120px">
    <el-form-item prop="name" label="组件名称">
      <el-input v-model="componentForm.name" placeholder="请填写组件名称"></el-input>
    </el-form-item>
    <el-form-item prop="type" label="组件类型">
      <el-select v-model="componentForm.type" placeholder="请选择组件类型" class="width-100">
        <el-option v-for="componentType in componentTypeArray" :key="componentType.value"
                   :label="componentType.label" :value="componentType.value"></el-option>
      </el-select>
    </el-form-item>
    <el-row :gutter="10" :span="24" v-if="componentForm.type==='compositeWidget'">
      <el-col :span="12">
        <el-form-item label="小组件行数">
          <el-input-number v-model="componentForm.widgetSize.rows" :min="1" :disabled="isEditComponent"
                           placeholder="请填写小组件行数"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="小组件列数">
          <el-input-number v-model="componentForm.widgetSize.columns" :min="1" :disabled="isEditComponent"
                           placeholder="请填写小组件列数"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="小组件功能" v-if="!isProtocol">
      <el-select v-model="componentForm.widgetType" clearable filterable class="width-100"
                 placeholder="请选择小组件功能">
        <el-option :label="widget.label" :value="widget.value" :key="idx"
                   v-for="(widget, idx) in widgetTypeArray"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="deviceType" label="设备类型"
                  v-if="componentForm.isWidget && componentForm.widgetType==='device'">
      <el-select v-model="componentForm.deviceType" clearable filterable class="width-100"
                 placeholder="请选择设备类型" @change="(val)=>getProtocolData(val)">
        <el-option :label="deviceType.name" :value="deviceType._id" :key="idx"
                   v-for="(deviceType, idx) in deviceTypeData"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="设备协议" v-if="componentForm.isWidget && componentForm.deviceType && componentForm.widgetType==='device'">
      <el-select v-model="componentForm.protocolId" clearable filterable class="width-100"
                 placeholder="请选择设备协议">
        <el-option :label="protocol.protocolName" :value="protocol._id" :key="idx"
                   v-for="(protocol, idx) in protocolData"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item prop="version" label="版本号" v-if="isEditComponent && componentForm.status !== '未发布'">
      <el-input v-model="componentForm.version" placeholder="请填写组件版本号"></el-input>
    </el-form-item>
    <el-form-item label="主题色">
      <ThemePicker v-model="componentForm.theme"></ThemePicker>
    </el-form-item>
    <el-form-item label="预览图" v-if="isEditComponent">
      <ImageUpload :preview-type="previewType.component" :image-list="componentForm.previewImages"></ImageUpload>
    </el-form-item>
    <el-form-item prop="remarks" label="备注">
      <el-input v-model="componentForm.remarks" type="textarea" placeholder="请填写备注"></el-input>
    </el-form-item>
    <div class="mar-top text-align-right">
      <el-button type="info" @click="componentFormCancel">取消</el-button>
      <el-button type="primary" @click="componentFormSubmit">提交</el-button>
    </div>
  </el-form>

</template>
<script>
  import ImageUpload from "@/components/ImageUpload.vue";
  import ThemePicker from "@/components/IDE/ThemePicker.vue";
  import {
    uploadPreviewType,
  } from "@/config/common";
  export default {
    name: "WidgetAdd",
    props:{
      componentForm: {
        type: Object,
        default: ()=>({})
      },
      isEditComponent: {
        type: Boolean,
        default: false
      },
      isProtocol: {
        type: Boolean,
        default: false
      }
    },
    components: {ThemePicker, ImageUpload},
    data() {
      return {
        componentFormLoading: false,
        componentFormRules: {
          name: [
            {required: true, message: '请填写组件名称', trigger: ['blur', 'change']}
          ],
          type: [
            {required: true, message: '请选择组件类型', trigger: ['blur', 'change']}
          ],
          category: [
            {required: true, message: '请选择组件功能', trigger: ['blur', 'change']}
          ],
          deviceType: [
            {required: true, message: '请选择设备类别', trigger: ['blur', 'change']}
          ],
        },
        componentFormRef: 'componentFormRef',
        widgetTypeArray: [
          {label: '房间', value: 'room'},
          {label: '设备', value: 'device'},
          {label: '其他', value: 'other'},
        ],
        componentTypeArray:[
          {
            label: "小组件",
            value: "compositeWidget",
          }
        ],
        deviceTypeData: [],
        protocolData: [],
        previewType: uploadPreviewType,
      }
    },
    watch: {
      isEditComponent: {
        handler(val) {
          this.getProtocolData(this.componentForm.deviceType)
          const componentForm = this.$refs[this.componentFormRef];
          componentForm && componentForm.resetFields();
        },
        immediate: true,
        deep: true
      }
    },
    mounted() {
      this.getDeviceTypeData();
    },
    methods: {
      componentFormSubmit() {
        this.$refs[this.componentFormRef].validate((valid) => {
          if (!valid) return;
          this.componentFormLoading = true;
          if (this.isEditComponent) {
            delete this.componentForm.status;
            API.component.componentEdit(this.componentForm).then((resp) => {
              this.showComponentDialog = false;
              this.$message({
                message: "组件编辑成功!",
                type: "success",
                duration: 1500,
              });
              this.$emit('submitDialog')
            }).catch((err) => {
              console.log("err: ", err);
            });
          } else {
            this.componentForm.group = "test"
            API.component.componentAdd(this.componentForm).then((resp) => {
              this.$emit('submitDialog')
              this.$message({
                message: "组件新增成功!",
                type: "success",
                duration: 1500,
              });
            }).catch((err) => {
              console.log("err: ", err);
            });
          }
        })
      },
      componentFormCancel() {
        this.$emit('closeDialog')
      },
      //获取所有设备
      getDeviceTypeData() {
        API.deviceType.deviceTypeAll().then(result => {
          const {data = []} = result;
          this.deviceTypeData = data;
        }).catch(err => {
          console.log('err', err)
        });
      },
      //获取关联设备协议
      getProtocolData(deviceType) {
        const param = {deviceType: deviceType};
        API.protocol.protocolAll(param).then(result => {
          const {data = []} = result;
          this.protocolData = data;
        }).catch(err => {
          console.log('err', err)
        });
      },
    }
  }
</script>
<style scoped lang="less">

</style>
